﻿<div id="Content-Body" class="Menu-Content-Body" style="min-width:1000px;">
    <div class="toggle">
        <button class="item active">菜单树</button>
    </div>
    <div class="tools" style="display:none;">
        <!--<input type="button" class="tool button refresh" resource="Menus-Tree" value="刷新" />-->
        <input type="button" class="tool button insert" resource="Menus-Tree" frame="TempMenuFrame" command="InsertMenu" value="新增" />
        <input type="button" class="tool button update" resource="Menus-Tree" frame="TempMenuFrame" command="UpdateMenu" value="修改" />
        <input type="button" class="tool button delete" resource="Menus-Tree" command="DeleteMenu" value="删除" />
    </div>

    <div class="tree-box">
        <ul id="Menus-Tree" class="tree insert update delete" command="ReadTreeMenu" Menu-Name="菜单 TreeView" parameters="Id:0"></ul>
    </div>

    <div id="Page-Preview-Frame" class="content">
        <div class="content">
            <span class="title">
                <a id="ImportButton" command="DeleteMenusByParentId,InsertMenu" Menu-Name="导入页面按钮" class="link">导入页面按钮</a>
                <span>页面预览</span>
            </span>
            <div id="Page-Preview">

            </div>
        </div>
    </div>

    <form id="TempMenuFrame" text="菜单信息" class="frame temp" onsubmit="return app.frameSubmit(this)" style="width:600px;height:480px;margin-left:0;margin-top:0;top:20%;left:20%;">
        <div class="top">
            <div class="right">
                <span class="min" title="最小化"></span>
                <span class="max" title="最大化"></span>
                <span class="close" title="关闭"></span>
            </div>
            <span class="title">查看/修改菜单信息</span>
        </div>
        <div class="content" readonly-where="data.Readonly">
            <div class="content">
                <span class="title">基本信息</span>
                <input type="hidden" name="Id" />
                <div class="item">
                    <label class="text">菜单名称：</label>
                    <input verify="notNull" class="input w374" type="text" name="Name" placeholder="菜单名称" />
                </div>
                <div class="item">
                    <label class="text">菜单类型：</label>
                    <select class="input w374" name="Type">
                        <option value="1">应用程序</option>
                        <option value="2">功能模块</option>
                        <option value="3">页面</option>
                        <option value="4">按钮</option>
                    </select>
                </div>
                <div class="item">
                    <label class="text">父级菜单：</label>
                    <select class="input none list w374" name="ParentId" Command="ReadListMenu" Menu-Name="父级菜单 List"></select>
                </div>
                <div class="item">
                    <label class="text">命令绑定：</label>
                    <input class="input w374" type="text" name="CommandNames" placeholder="命令绑定" />
                </div>
                <div class="item">
                    <label class="text">菜单标识：</label>
                    <input class="input w374" type="text" name="Identifier" placeholder="菜单标识" />
                </div>
                <div class="item">
                    <label class="text">菜单 Url：</label>
                    <input class="input w374" type="text" name="Url" placeholder="菜单 Url" />
                </div>
                <div class="item">
                    <label class="text">排序值：</label>
                    <input verify="notNull,number" class="input w374" type="text" name="Sort" value="0" placeholder="排序值" />
                </div>
            </div>
        </div>
        <div class="bottom">
            <input type="submit" class="button" value="保存修改" display-where="!data.Readonly" />
            <input type="button" class="button close" value="返回" />
        </div>
    </form>

    <script>
        $("#TempMenuFrame").on("process", function (e, Data) {
            Data.ParentId = Data.ParentId || 0;
        });

        $("#TempMenuFrame").on("show", function (e) {
            var Data = MenusTree[0].getSelected()[0];

            if ($(this).attr("command").startsWith("Insert") && Data) {

                if (Data.Type == 4) {
                    $(this).remove();
                    app.errMsg("不能给按钮类型增加下级。");

                    return;
                }
                ++Data.Type;

                delete Data.Name;

                Data.ParentId = Data.Id;
                delete Data.Id;
                delete Data.Identifier;
                delete Data.Url;
                delete Data.Sort;

                app.apply(this, Data);
            }
        });

        $("#TempMenuFrame [name=Type]").change(function () {
            var Frame = $(this).parents(".frame");

            var ParentId = Frame.find("[name=ParentId]");

            ParentId.prop("parameters", { Type: this.value - 1 });

            app.control(ParentId, "list");
        });

        $.extend(window, {
        });

        var MenusTree = $("#Menus-Tree");
        app.control(MenusTree, "tree");

        MenusTree.on("process", function (e, Data) {
            Data.treeText = Data.Name;
            Data.treeType = Data.Type == 4 ? "node" : "dir";
            Data.treeIcon = null;
        });

        MenusTree.on("selectedChange", function () {
            MenusTree.each(function () {
                var Selected = this.getSelected();
                var PagePreview = $("#Page-Preview");
                var OldBody = app.body;
                app.body = PagePreview;

                $(Selected).each(function () {
                    this.CancelRemoveUnauthorized = true;

                    if (this.Type == 3) {
                        app.loadBody(this, function () {

                            // 避免与此主页面冲突。
                            PagePreview.find("#TempMenuFrame").remove();

                        }, true);
                        $("#Page-Preview-Frame").addClass("inline-block");

                    } else {
                        $("#Page-Preview-Frame").removeClass("inline-block");
                    }
                });

                app.body = OldBody;
            });
        });

        function WindowResize() {
            var Content = $("#Content");
            var ContentBody = $("#Content-Body");

            $("#Page-Preview-Frame").width(ContentBody.width() - 440);

            $("#Page-Preview").height(Math.max(Content.height(), 600) - 115);

            $(".tree-box").height(Math.max(Content.height(), 600) - 80);
        }

        $(window).resize(WindowResize);

        WindowResize();

        $("#ImportButton").click(function () {
            MenusTree.each(function () {
                var Items = this.getSelected();

                $(Items).each(function () {
                    var Data = this;

                    $.ajax({
                        url: Data.Url, type: "GET", data: { Version: app.version }, success: function (HTML) {

                            var Box = $("<div></div>");

                            Box.html(HTML);

                            var Buttons = Box.find("[command]");

                            var Imports = [];

                            var Success = true;

                            $(Buttons).each(function () {
                                var Command = $(this).attr("command");
                                var Identifier = $(this).attr("menu-id");
                                var Name = $(this).attr("menu-name");

                                if (!Name) {
                                    if (this.tagName == "BUTTON") {
                                        Name = $(this).text();
                                    } else if (this.tagName == "INPUT" && String(this.type).toUpperCase() == "BUTTON") {
                                        Name = $(this).val();
                                    } else {
                                        Name = this.id || this.tagName;
                                    }
                                }

                                if (Identifier) {
                                    Identifier = this.tagName + "[Menu-Id='" + Identifier + "']";
                                } else if (this.id) {
                                    Identifier = "#" + this.id;
                                } else {
                                    Identifier = this.tagName + "[Command=\"" + Command + "\"]"
                                }

                                if (Box.find(Identifier).length != 1) {
                                    app.errMsg("导入失败！按钮 Identifier 不唯一。");

                                    Success = false;

                                    return false;
                                }

                                Imports.push({ Command: "InsertMenu", Name: Name, ParentId: Data.Id, CommandNames: Command, Identifier: Identifier, Type: 4, Sort: 0 });
                            });

                            if (Success) {

                                var Index = 0;

                                function PushNext() {
                                    if (Index < Imports.length) {
                                        app.server(Imports[Index], PushNext);

                                        ++Index;
                                    } else {
                                        app.msg(Data.Name + " 导入成功！");
                                    }
                                }

                                app.server({ Command: "DeleteMenusByParentId", ParentId: Data.Id }, PushNext);
                            }
                        }
                    });
                });
            });
        });

            app.control($("#Content-Body"), "content");

    debugger;
    </script>
</div>